<template>
	<view class="content-class">
		<view v-for="(i, iIndex) in cardList" :key="iIndex" @click="handleClick(i)">
			<u-row class="tip">{{i.info}}</u-row>
			<view class="jkzs">
				<view class="health-card">
					<u-row class="header">
						<u-row>
							<u-image style="margin-right:8px" width="16px" height="16px" :src="i.icon"></u-image>
							{{ i.name }}
						</u-row>
						<u-row>
							{{ i.subTitle }}
							<u-image style="margin-left: 8px;" width="20px" height="20px" src="../../../static/images/measuring/arrow.png"></u-image>
						</u-row>
					</u-row>
				</view>
			</view>
		</view>
		<view style="color:#303122">
			<u-modal @confirm="confirmDay" @close="modelShow = false" :show="modelShow" closeOnClickOverlay title="天数" confirmColor="#FF64BA">
				<u--input type="number" style="width: 100%;" placeholder="请输入天数" border="surround" v-model="value"></u--input>
			</u-modal>
			<u-calendar closeOnClickOverlay @confirm="confirmDate" @close="calendarShow=false" :minDate="minDate.replace(minDate.split('-')[0],minDate.split('-')[0] - 1)" monthNum="24" :showTitle="false" color="#FF64BA" round="20" :show="calendarShow"></u-calendar>
		</view>
		<view class="bottom-btn">
			<view class="sport-btn">确定</view>
		</view>
	</view>
</template>

<script>
	import {
		parseTime
	} from "@/utils/index.js"
	export default {
		data() {
			return {
				value: '',
				currentItem: {},
				minDate: parseTime(new Date(), '{y}-{m}-{d}'),
				calendarShow: false,
				modelShow: false,
				cardList: [{
					name: '经期开始日期',
					icon: require("../../../static/images/homePage/jqksrq.png"),
					subTitle: '2025-02-13',
					info: '您的最近一次经期开始日期是什么时候',
					event: 'setStartDate'
				}, {
					name: '经期长度',
					icon: require("../../../static/images/homePage/jqksrq.png"),
					subTitle: '7天',
					info: '您的月经大概持续几天',
					event: 'setDay'
				}, {
					name: '周期长度',
					icon: require("../../../static/images/homePage/jqksrq.png"),
					subTitle: '30天',
					info: '两次月经开始日大概间隔多久',
					event: 'setDay'
				}]
			};
		},
		mounted(e) {

		},
		methods: {
			handleClick(i) {
				this.currentItem = i
				if (!i.event) return
				this[i.event]()
			},
			setStartDate() {
				this.calendarShow = true
			},
			setDay() {
				this.value = ''
				this.modelShow = true
			},
			confirmDay(e) {
				this.currentItem.subTitle = this.value + '天'
				this.modelShow = false
			},
			confirmDate(e) {
				this.currentItem.subTitle = e[0]
				this.calendarShow = false
			}
		},
	};
</script>

<style scoped lang="scss">
	.content-class {
		padding: 15px;

		.tip {
			font-weight: bold;
			color: #999999;
			line-height: 50px;

		}

		.jkzs {
			border-radius: 12px;
			border: none;
			box-shadow: unset;
			background-color: #1B1B1B;
		}

		.health-card {
			.header {
				justify-content: space-between !important;
				font-size: 14px;
			}
		}
	}
</style>